<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JSONP优化之封装</title>
</head>
<body>
	 <!-- JSONP优化：
	 	1、客户端需要将函数名传递到服务器;
	 	2、将script请求的发送变成动态请求;
	 	 -->



<button id="btn">点我发送请求</button>

<!-- 定义一个全局作用域下的函数且必须在执行函数之前  -->
<script>
	function fn1 (data) {
					console.log("被定义的这个全局作用域的fn1函数被调用啦")
					console.log(data);

					
				}
</script>

<script type="text/javascript">
	// 获取按钮
	var btn = document.getElementById("btn");
	// 为按钮添加点击事件
	btn.onclick =function (){
		// 创建script标签
		var script = document.createElement("script");
		// 设置src属性
		script.src="http://localhost:3001/better?callback=fn1";
		// 将script标签追加到页面中
		document.body.appendChild(script);
		// 为script标签添加onload事件
		script.onload=function(){
			// 将body中的script标签删除
			document.body.removeChild(script);
		}


	}
	


</script>





		
		
	
</body>
</html>